<template>
  <div>
    <el-container>
      <el-header class="header">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="black"
          text-color="white" active-text-color="white" router>
          <span class="el-menu-item main-title">游客服务后台管理系统</span>
          <el-menu-item v-for="(item, index) in menus" :key="index" :index="item.path">
            {{ item.title }}
          </el-menu-item>
          <span class="el-menu-item main-welcome">管理员{{ adminInfo.username }}，你好</span>
          <el-menu-item @click="logout">退出登录</el-menu-item>
        </el-menu>
      </el-header>
      <el-main class="main-page">
        <router-view></router-view>
      </el-main>
      <el-footer class="footer"></el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElNotification } from "element-plus";
import { getAdminInfo } from '@/api/admin';
import { useRouter } from 'vue-router';
import { useTokenStore } from "@/stores/token.js";

const tokenStore = useTokenStore();

const adminInfo = ref({});
const router = useRouter();

//当前选择的菜单
const activeIndex = ref("/main");
//菜单信息
const menus = ref([
  { title: '主页', path: '/home' },
]);

//获取管理员的登录信息
const getInfo = async () => {
  let result = await getAdminInfo();
  adminInfo.value = result.data;
  console.log(adminInfo.value.managerType);
  tokenStore.setAuth(adminInfo.value.managerType);
  setupMenus();
  console.log(result);
}

//设置菜单信息
const setupMenus = () => {
  const baseMenus = [
    { title: '主页', path: '/home' },
    { title: '投诉建议', path: '/complaint' },
    { title: '紧急事务', path: '/emergency' }
  ];

  if (tokenStore.getAuth() === 3) {
    baseMenus.push(
      { title: '酒店管理', path: '/hotel' },
      { title: '房间管理', path: '/room' }
    );
  }
  baseMenus.push({
    title: '重置密码',
    path: '/resetPwd'
  })
  menus.value = baseMenus;
}

//用户退出登录
const logout = () => {
  ElMessageBox.confirm(
    '请问您是否退出登录',
    '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '点错了',
    type: 'warning',
  }
  ).then(async () => {
    if (useTokenStore().removeToken()) {
      //退出成功
      ElNotification({
        title: '提示',
        message: '退出登录成功',
        type: 'warning',
      });
      //跳转到登录页面
      await router.push("/login");
    }
  }).catch(() => {
    ElNotification({
      title: '提示',
      message: '取消退出登录',
      type: 'info',
    });
  });
}

/* 函数结束 */

//程序加载时的钩子函数
onMounted(() => {
  getInfo();
});
</script>

<style scoped>
.header {
  padding: 0px;
}

.footer {
  padding: 0px;
}

.main-page {
  padding: 0px;
}

.main-title {
  color: white;
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: 3px;
}

.main-welcome {
  font-size: large;
  font-weight: bolder;
  color: white;
  width: 50%;
}
</style>
